<template>
  <div id="app" :style="note">
	  <div class="line" id="topPart"></div>
	  <div id="mainPart">
		  <header id="header" class="alt">
		   <div class="logo" @click="toHome" style="cursor: pointer;">InkCloud <span style="font-family: '微软雅黑';">墨云自习室</span></div>
		    <el-input
			class="search"
			    size="medium"
		       placeholder="请输入内容"
		       prefix-icon="el-icon-search"
		       v-model="input2">
		     </el-input>
		  <el-button type="success" style="margin-right: 45%;">搜索</el-button>
		
		  </header>
		  
		  
    <el-container  style="margin-top: 100px;">
      <el-header style="text-align:center;margin-bottom: 50px;">
      </el-header>
   
      <el-main>
		  
		  <el-row>
		    <el-col :span="21"><i class="el-icon-more"></i></el-col>
		    <el-col :span="3">
				
				<el-button type="primary" @click="dialog=true">分享资源</el-button>
				
			</el-col>
		  </el-row>
		  
        <div>
                <el-row>
                    <el-col :span="16" :offset="4">
                        <el-table :data="list"
						stripe style="width: 100%">
                            
                            <el-table-column prop="resourceName" label="标题" >
                            </el-table-column>
							<el-table-column prop="dedicator" label="作者" >
							</el-table-column>
							<el-table-column prop="url" label="链接" >
								
							</el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
      </el-main>
	  
    </el-container>
	</div>
	
	<el-dialog
	  title="分享资源"
	  :visible.sync="dialog"
	  width="30%"
	  :before-close="handleClose">
	  
	  <el-row>
	    <el-col :span="5"><font size="4">资源名称:</font></el-col>
	    <el-col :span="13">
			<el-input
			  v-model="submitResource.resourceName"
			  clearable
			  maxlength="20"
			  show-word-limit>
			</el-input>
		</el-col>
	  </el-row>
	  
	  <el-row>
	    <el-col :span="5"><font size="5">url:</font></el-col>
	    <el-col :span="13">
	  			<el-input
	  			  v-model="submitResource.url"
	  			  clearable
	  			  >
	  			</el-input>
	  		</el-col>
			<el-col span="3" offset="2" >
				<el-button type="primary" icon="el-icon-check" circle @click="submit"></el-button>
			</el-col>
			
	  </el-row>
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	</el-dialog>
	
	
  </div>
</template>

<script>

    import axios from 'axios'
    export default {
        name: "List",
        data() {
            return {
				value:'',
				istabBar:false,
				num:'1',
				dialog:false,
				note: {
				   background: "white"+" url(" + require("../assets/background.png") + ") "+"fixed",
				   backgroundSize: "auto",
				  
				   },
                list: [
                       {resourceName:"手把手解读hashmap",dedicator:"xiaoming",url:"xxx.cn"},
                       {resourceName:"手把手解读redis",dedicator:"xiaoming",url:"xxx.cn"},
					   {resourceName:"手把手解读hashmap",dedicator:"xiaoming",url:"xxx.cn"},
                            ],
				submitResource:{resourceName:'',url:''}
            }
        },
        mounted() {
			window.addEventListener('scroll', this.handleScroll),// Dom树加载完毕
            this.init()
			
        },
        methods: {
			
            init() {
				var that =this
				var server = this.$myConfig.server
                axios.get( server + '/resource/resourceList')
                    .then(res => {
                       
					   var status = res.data.status
					   if(status==0){
						   that.$message.warning("服务器内部出现问题或者网络")
					   }else{
						   that.list = res.data.data
						   that.$message.success("成功获取数据")
					   }
					   
					   
                    })
            },
			 handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },
			
			handleClose(done) {
				    this.$confirm('确认关闭？')
				      .then(_ => {
						  this.dialog=false
				           done();
				          })
				     .catch(_ => {});
				        },
			submit:function(){
					if(this.submitResource.resourceName==''||this.submitResource.url==''){
						this.$message.error("分享内容不能为空哦")
						return
					}
					var that = this
					var server = this.$myConfig.server
					var loginAddr = this.$myConfig.loginAddr
					axios({
					  method: 'post',
					  url:  server + '/resource/publishResource',
					  data:that.submitResource,
					  withCredentials: true
					}) .then(function (response) {
							var status = response.data.status
							if(status==-1){
								that.$message.error("您还没有登录哦")
							
							that.timer = setTimeout(()=>{   
								            window.location.href = loginAddr;           
								                   },2000);
							
							}else if(status==0){
								that.$message.warning("服务器内部出了点问题")
						
								
							}else{
								that.dialog=false
								that.$message.success("分享成功")
								that.submitResource.resourceName=''
								that.submitResource.url=''
								that.init()
							}	
												})
						.catch(function (error) {
								that.$message.warning("网络开了会小差")
												});

			},
			toHome:function(){
						 var mainAddr = this.$myConfig.mainAddr
						 this.timer = setTimeout(()=>{   //设置延迟执行
						      window.location.href = mainAddr;           
						             },0);
						
			}
			
        }
    }
</script>

<style scoped>
body{
	background: ;
}
#navBar {
        
    }
	.search{
		width: 300px;
		
		margin-top: 50px;
		margin-right: 10px;
	}
	#header {
		font-size: 1.25em;
		background: rgba(0, 0, 0, 0.75);
		color: #aed6f1;
		height: 3.25em;
		background-image: url(../assets/banner.jpg);
		left: 0;
		width: 100%;
		height: 150px;
		line-height: 3.25em;
		position: fixed;
		text-align: right;
		top: 0;
		width: 100%;
		cursor:default;
		
		
	}
	
	#header > .logo {
		display: inline-block;
		height: inherit;
		left: 1.25em;
		line-height: inherit;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
	}
	
	#header > .logo span {
		font-weight: 300;
		font-size: .8em;
		color: #FFF;
	}
	
	#header > a {
		transition: color 0.2s ease-in-out;
		display: inline-block;
		padding: 0 1.25em;
		text-decoration: none;
		color: #FFF;
	}
	
	#header > a:hover {
		color: #3498db;
	}
	
	/* 背景透明,位置调整 */
	#header.alt {
		animation: none;
		background-color: transparent;
		box-shadow: none;
		overflow: hidden;
		position: absolute;
		top: 1em;
	}
	.isFixed {
	        position: fixed;
	        top: 0;
	        z-index: 10;
	    }
    #mainPart {
      
    }
</style>
